<template>
  <div class="shoppingCard">
    <van-checkbox-group v-model="result" ref="checkGroup">
      <van-cell-group>
        <van-cell v-for="item in getCartList" clickable :key="item.id" >
          <template #icon>
            <van-checkbox :name="item.productId" ref="checkboxes" />
          </template>
          <van-swipe-cell>
            <van-card :num="item.number"  :price="item.price" :title="item.goodsName" class="goods-card"
                :thumb="item.picUrl" footer="111">
                <template #tags>
                  <van-tag plain type="danger" v-for="(itemInner,index) in item.specifications" :key="index">{{ itemInner }}</van-tag>
                </template>
                <template #footer>
                  <van-tag plain>添加时间：{{ item.addTime }}</van-tag>
                </template>
              </van-card>
            <template #right>
              <van-button square text="删除" type="danger" :data-id="item.productId" class="delete-button"  @click="deleteItem" />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-submit-bar :price="getCartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="isChecked" @click="checkAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
    <!-- <button @click="aaa">111</button> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ShoppingCard',
  components: {

  },
  data () {
    return {
      isChecked: false,
      result: [],
      listLength: this.getCartList?.length,
      totalAmount: 0
    }
  },
  computed: {
    ...mapGetters('ShopTrolley', ['getCartList', 'getCartTotal', 'getCheckIds'])
  },
  watch: {
    getCartList: {
      // immediate: true,
      handler (newValue) {
        console.log(newValue, '@@@@@@@2')
        this.listLength = newValue?.length
      }
    },
    result: {
      // immediate: true,
      handler (newValue, oldValue) {
        // 当选中的列表个数发生变化时，触发check接口
        console.log(newValue, oldValue, this.checkHandler)
        // 更加result数组的变化，去发送check请求
        if (oldValue.length) {
          this.checkHandler({ productIds: oldValue, isChecked: 0 })
        }
        if (newValue.length) {
          this.checkHandler({ productIds: newValue, isChecked: 1 })
        }
        // 判断全选按钮是否选中
        if (newValue.length < this.listLength) {
          this.isChecked = false
        } else {
          this.isChecked = true
        }
      }
    }
  },
  mounted () {
    // this.$refs.checkGroup.toggleAll()
    // this.totalAmount = this.getCartTotal.checkedGoodsAmount
    setTimeout(() => {
      this.getCartList.forEach(item => {
        if (item.checked) {
          this.result.push(item.productId)
        }
      })
    }, 400)
    console.log(this.result)
    // this.totalAmount = this.getCartTotal
  },
  // beforeDestroy () {
  //   window.sessionStorage.setItem('result', this.result)
  // },
  methods: {
    deleteItem (e) {
      // this.listLength = length
      const productId = Number(e.target.attributes['data-id'].value)
      this.$store.dispatch('ShopTrolley/deleteShopData', productId)
    },
    checkAll () {
      if (this.result.length < this.listLength) {
        this.$refs.checkGroup.toggleAll(true)
      } else {
        this.$refs.checkGroup.toggleAll(false)
      }
    },
    // 触发check请求
    checkHandler (options) {
      this.$store.dispatch('ShopTrolley/checkShopData', options)
    },
    onSubmit () {},
    onClickEditAddress () {}
  }
}

</script>
<style scoped lang='scss'>
.van-submit-bar{
  bottom:1.2rem
}
.shoppingCard {
  margin-top: 30px;

}

.goods-card {
  margin: 0;
  background-color: #fff;
  margin-bottom:10px;
}

.delete-button {
  height: 100%;
}
</style>
